<template>
    <div class="foot">
        <router-link :to="{name:'Home'}" :class='{active:num==1}' tag="div">
            <span class="iconfont icon-zhuye"></span>
            <span>首页</span>
        </router-link>
        <!-- <router-link :to="{name:'Zhaomu'}" :class='{active:num==2}' tag="div">
            <span class="iconfont icon-shenfenzheng"></span>
            <span>招募</span>
        </router-link> -->
        <router-link :to="{name:'Gouwu'}" :class='{active:num==2}' tag="div">
            <span class="iconfont icon-bianji"></span>
            <span>购物车</span>
        </router-link>
        <router-link :to="{name:'Wode'}" :class='{active:num==3}' tag="div">
            <span class="iconfont icon-wode"></span>
            <span>我的</span>
        </router-link>
    </div>
</template>

<script>
export default({
    name:"foot",
    props: ["num"]
})
</script>

<style lang="scss" scoped>
.foot{
    left: 0px;
    bottom: 0px;
    width: 100%;
    display: flex;
    position: fixed;
    padding-top: 10px;
    border-top: 1px solid #000;
    background-color: white;
    justify-content: space-evenly;
    >div{
        width: 60px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        cursor: pointer;
        >span{
            font-size: 20px;
            
        }
    }
}
.active{
    color: orangered;
}
</style>